<template>
    <div class="home">
        <div class="home-information">
            <div class="home-information-item"
                 @click="goAlarmList"
                 v-for="(item, key) in information"
                 :key="key"
            >
                <a-card :loading="initLoading">
                    <p>{{item.props}}
                        <kIcon class="home-information-item-sort" :type="informationIcon[item.down]"></kIcon>
                    </p>
                    <p>{{item.value}} <i>次</i></p>
                    <p>人数&nbsp;{{item.number}}人</p>
                </a-card>
            </div>
        </div>
        <div class="home-form" @click="goAlarmList">
            <div class="home-form-alerts">
                <div class="home-form-title">
                    报警次数TOP5用户
                </div>
                <div class="home-form-table">
                    <div class="home-form-table-th">
                        <span v-for="(item, key) in ['排序', '姓名', '报警次数', '机构']"
                              :key="key">{{item}}</span>
                    </div>
                    <a-skeleton :loading="initLoading" :paragraph="{ rows: 5 }" active>
                        <div class="home-form-table-td"
                             v-for="(item, key) in policeTopFive"
                             :key="key">
                            <span>0{{++key}}</span>
                            <span>{{item.name}}</span>
                            <span>{{item.alerts}}次</span>
                            <span>{{item.institution}}</span>
                        </div>
                    </a-skeleton>
                </div>
            </div>
            <div class="home-form-emergency" @click="goAlarmList">
                <div class="home-form-title">
                    紧急报警
                    <span>更多</span>
                </div>
                <div class="home-form-emergency-content">
                    <alarmList :data="alarm" :loading="initLoading"/>
                </div>
            </div>
        </div>
        <div class="home-statistical">
            <div class="home-form-title" @click="goAlarmList">
                近30天报警次数/人数趋势
            </div>
            <trendChart></trendChart>
        </div>
        <div class="home-option">
            <div class="home-option-row" @click="goUser">
                <div class="home-form-title">
                    用户
                </div>
                <UserChart></UserChart>
            </div>
            <div class="home-option-row" @click="goEquipment">
                <div class="home-form-title">
                    设备
                </div>
                <equipmentChart></equipmentChart>
            </div>
            <div class="home-option-row" @click="goInstitutions">
                <div class="home-form-title">
                    机构
                </div>
                <div class="home-option-row-item" >
                    <div>
                        <img src="../../assets/institutions.svg" alt="">
                    </div>
                    <div>
                        30 <i>个</i>
                        <p>机构数量</p>
                    </div>
                </div>
                <div class="home-option-row-item">
                    <div>
                        <img src="../../assets/admin.svg" alt="">
                    </div>
                    <div>
                        20 <i>个</i>
                        <p>管理员数量</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import kIcon from '../../utils/k-icon';
    import UserChart from './user-chrt';
    import trendChart from './trend-chart';
    import equipmentChart from './equipment-chart';
    import alarmList from './alarmList';
    import {homeService} from '../../services'
    import {informationIcon} from './config';
    import Mock from 'mockjs';
    //全部引入
    export default {
        name: "index",
        components: {
            kIcon,
            alarmList,
            UserChart,
            trendChart,
            equipmentChart,
        },
        data() {
            return {
                informationIcon,
                initLoading: false,
                information: [
                    {
                        props: 'sos',
                        value: 20,
                        number: 10,
                        down: false
                    },
                    {
                        props: '出围栏',
                        value: 20,
                        number: 10,
                        down: false
                    },
                    {
                        props: '心率',
                        value: 20,
                        number: 10,
                        down: true
                    },
                    {
                        props: '血压',
                        value: 20,
                        number: 10,
                        down: false
                    },
                ],
                policeTopFive: [],
                alarm: [{}, {}, {}],
                alarmTime: null,
            }
        },
        created() {
            this.initLoading = true;
            homeService.homeInit().then(({data}) => {
                let {information, policeTopFive} = data;
                this.information = information;
                this.policeTopFive = policeTopFive;
                let alaer = [];
                for (let i = 0; i < 8; i++) {
                    alaer.push(Mock.mock({
                            "type|0-1": 0,
                            time: '@now()',
                            name: '@cname',
                            info: '@city()',
                            site: '@county(true)',
                            institutions: '@csentence(3, 5)'
                        }
                    ))
                }
                this.alarm = alaer;
                this.initLoading = false;
                this.mocePush();
            })
        },
        mounted() {
        },
        methods: {
            goEquipment() {
                // this.$router.push('/UserManagement/dataMonitoring')
                this.$router.push('/equipment')
            },
            goUser() {
                this.$router.push('/UserManagement/dataMonitoring')
                // this.$router.push('/equipment')
            },
            goInstitutions() {
                this.$router.push('/organization')
            },
            goAlarmList() {
                this.$router.push('/UserManagement/alarmRecord')
            },
            mocePush() {
                this.alarmTime = setInterval(() => {
                    this.alarm.push(Mock.mock({
                        "type|0-1": 0,
                        time: '@now()',
                        name: '@cname',
                        info: '@city()',
                        site: '@county(true)',
                        institutions: '@csentence(3, 5)'
                    }));
                }, 8000)
            }
        },
        destroyed() {
            clearInterval(this.alarmTime);
        }
    }
</script>

<style lang="less">
    .home {
        .ant-card-body {
            border: none;
            padding: 0 !important;
        }

        .ant-card-bordered {
            border: none !important;
        }

        &-information {
            display: flex;
            background: #fff;

            &-item {
                margin: 20px 0;
                padding: 0 24px;
                flex: 1;
                position: relative;

                &::before {
                    content: "";
                    position: absolute;
                    display: block;
                    width: 1px;
                    height: 81px;
                    background-color: rgba(234, 229, 229, 1);
                    right: 0;
                    bottom: 0;
                    top: 0;
                    margin: auto;
                }

                &:last-child {
                    border: none;

                    &::before {
                        display: none;
                    }
                }

                &-sort {
                    position: absolute;
                     bottom: -25px;
                    left: 100%;
                    font-size: 22px;
                }

                p {
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    position: relative;

                    &:nth-child(1) {
                        color: rgba(153, 153, 153, 1);
                        font-size: 16px;
                        width: 3em;
                        margin: auto;
                    }

                    &:nth-child(2) {
                        color: rgba(0, 0, 0, 1);
                        font-size: 38px;
                        font-weight: bold;

                        i {
                            font-style: normal;
                            width: 14px;
                            color: rgba(80, 80, 80, 1);
                            font-size: 14px;
                        }
                    }

                    &:nth-child(3) {
                        color: rgba(0, 0, 0, 1);
                        font-size: 14px;
                    }
                }

            }
        }

        &-form {
            display: flex;
            padding: 20px 0;

            &-alerts, &-emergency {
                flex: 1;
                height: 386px;
                background: #fff;
            }

            &-emergency {
                display: flex;
                flex-direction: column;

                &-content {
                    flex: 1;
                    overflow: auto;
                }
            }

            &-title {
                color: rgba(0, 0, 0, 1);
                font-size: 16px;
                padding: 11px 24px;
                height: 50px !important;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px rgba(232, 232, 232, 1) solid;

                span {
                    color: rgba(181, 181, 181, 1);
                    font-size: 14px;
                    user-select: none;
                    cursor: pointer;
                }
            }

            &-alerts {
                margin-right: 20px;
            }

            &-table {
                padding: 24px;

                &-th {
                    display: flex;

                    span {
                        flex: 1;
                        color: rgba(0, 0, 0, 1);
                        font-size: 14px;
                    }
                }

                &-td {
                    display: flex;
                    padding-top: 30px;

                    span {
                        flex: 1;
                        color: rgba(80, 80, 80, 1);
                        font-size: 14px;
                    }
                }
            }

        }

        &-statistical {
            background: #fff;
            padding-bottom: 20px;
        }

        &-option {
            display: flex;
            margin: 20px 0;

            &-row {
                background: #fff;
                flex: 1;
                min-width: 32%;
                box-sizing: border-box;
                margin-right: 20px;

                &:last-child {
                    margin: 0;
                }

                &-item {
                    margin: 20px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    min-width: 115px;
                    height: 82px;
                    color: rgba(80, 80, 80, 1);
                    font-size: 14px;
                    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
                    cursor: pointer;

                    div:first-child {
                        width: 76px;
                        height: 76px;
                        color: rgba(80, 80, 80, 1);
                        background-color: rgba(42, 130, 228, 0.1);
                        font-size: 14px;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;

                        img {
                            width: 52px;
                            height: 52px;
                        }
                    }

                    div:last-child {
                        color: rgba(42, 130, 228, 1);
                        font-size: 40px;
                        padding-left: 12px;
                        i {
                            font-style: normal;
                            font-size: 14px;
                        }
                        p {
                            color: rgba(80, 80, 80, 1);
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
</style>
